<h3>Form Extended
   <small>New elements to extend the classic functions</small>
</h3>
<!-- START panel-->
<div class="panel panel-default">
   <div class="panel-heading">Form elements</div>
   <div class="panel-body">
      <form method="get" ng-controller="FormDemoCtrl" class="form-horizontal">
         <fieldset>
            <legend>New Components</legend>
            <div class="form-group">
               <label class="col-sm-2 control-label">Slider
                  <br/>
                  <small>Classic, range and vertical</small>
                  <br/>
               </label>
               <div class="col-sm-10">
                  <div class="row">
                     <div class="col-xs-6">
                        <slider ng-model="slider1" min="5" max="35" step="1" orientation="vertical" class="bs-slider slider-vertical mr"></slider>
                        <slider ng-model="slider2" min="5" max="35" step="1" orientation="vertical" class="bs-slider slider-vertical mr"></slider>
                        <slider ng-model="slider3" min="5" max="35" step="1" orientation="vertical" class="bs-slider slider-vertical mr"></slider>
                        <slider ng-model="slider4" min="5" max="35" step="1" orientation="vertical" class="bs-slider slider-vertical mr"></slider>
                        <slider ng-model="slider5" min="5" max="35" step="1" orientation="vertical" class="bs-slider slider-vertical mr"></slider>
                        <slider ng-model="slider6" min="5" max="35" step="1" orientation="vertical" class="bs-slider slider-vertical mr"></slider>
                        <br/>
                        <br/>
                        <slider ng-model="slider7" min="5" max="20" step="1" orientation="horizontal" class="bs-slider slider-horizontal"></slider>
                        <br/>
                        <br/>
                        <slider ng-model="slider8" min="'10'" max="'1000'" value="[350,750]" range="true" class="bs-slider"></slider>
                     </div>
                     <div class="col-xs-6">
                        <p>Value 1: {{slider1}}</p>
                        <p>Value 2: {{slider2}}</p>
                        <p>Value 3: {{slider3}}</p>
                        <p>Value 4: {{slider4}}</p>
                        <p>Value 5: {{slider5}}</p>
                        <p>Value 6: {{slider6}}</p>
                        <p>Value 7: {{slider7}}</p>
                        <p>Value 8: {{slider8}}</p>
                     </div>
                  </div>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch Small</label>
               <div class="col-sm-10">
                  <label class="switch switch-sm">
                     <input type="checkbox" checked="checked" />
                     <span></span>
                  </label>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch</label>
               <div class="col-sm-10">
                  <label class="switch">
                     <input type="checkbox" checked="checked" />
                     <span></span>
                  </label>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch Large</label>
               <div class="col-sm-10">
                  <label class="switch switch-lg">
                     <input type="checkbox" checked="checked" />
                     <span></span>
                  </label>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Switch Radio</label>
               <div class="col-sm-10">
                  <label class="switch switch-lg">
                     <input type="radio" checked="checked" name="radioSwitch" />
                     <span></span>
                  </label>
                  <label class="switch switch-lg">
                     <input type="radio" name="radioSwitch" />
                     <span></span>
                  </label>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group mb">
               <label class="col-sm-2 control-label">Chosen w/Input groups</label>
               <div class="col-sm-4">
                  <div class="input-group mb">
                     <span class="input-group-addon">@</span>
                     <!-- this uses fixed width to avoid expand outside the group container-->
                     <select chosen="" ng-model="inputg1" width="'300px'" class="chosen-select input-md">
                        <option value=""></option>
                        <option value="1">Nulla facilisi. Quisque in sapien et neque sodales facilisis. Proin a porta turpis.</option>
                        <option value="2">New York Giants</option>
                        <option value="3">Philadelphia Eagles</option>
                        <option value="4">Washington Redskins</option>
                     </select>
                  </div>
               </div>
            </div>
            <div class="form-group mb">
               <label class="col-sm-2 control-label">Chosen Ajax</label>
               <div class="col-sm-10">
                  <select chosen="" ng-model="state" ng-options="s for s in states" width="'100%'" class="chosen-select input-md">
                     <option value=""></option>
                  </select>
               </div>
            </div>
            <div class="form-group mb">
               <label class="col-sm-2 control-label">Chosen Groups</label>
               <div class="col-sm-10">
                  <select chosen="" ng-model="team" width="'100%'" class="chosen-select input-md">
                     <option value=""></option>
                     <optgroup label="NFC EAST">
                        <option>Dallas Cowboys</option>
                        <option>New York Giants</option>
                        <option>Philadelphia Eagles</option>
                        <option>Washington Redskins</option>
                     </optgroup>
                     <optgroup label="NFC NORTH">
                        <option>Chicago Bears</option>
                        <option>Detroit Lions</option>
                        <option>Green Bay Packers</option>
                        <option>Minnesota Vikings</option>
                     </optgroup>
                     <optgroup label="NFC SOUTH">
                        <option>Atlanta Falcons</option>
                        <option>Carolina Panthers</option>
                        <option>New Orleans Saints</option>
                        <option>Tampa Bay Buccaneers</option>
                     </optgroup>
                     <optgroup label="NFC WEST">
                        <option>Arizona Cardinals</option>
                        <option>St. Louis Rams</option>
                        <option>San Francisco 49ers</option>
                        <option>Seattle Seahawks</option>
                     </optgroup>
                     <optgroup label="AFC EAST">
                        <option>Buffalo Bills</option>
                        <option>Miami Dolphins</option>
                        <option>New England Patriots</option>
                        <option>New York Jets</option>
                     </optgroup>
                     <optgroup label="AFC NORTH">
                        <option>Baltimore Ravens</option>
                        <option>Cincinnati Bengals</option>
                        <option>Cleveland Browns</option>
                        <option>Pittsburgh Steelers</option>
                     </optgroup>
                     <optgroup label="AFC SOUTH">
                        <option>Houston Texans</option>
                        <option>Indianapolis Colts</option>
                        <option>Jacksonville Jaguars</option>
                        <option>Tennessee Titans</option>
                     </optgroup>
                     <optgroup label="AFC WEST">
                        <option>Denver Broncos</option>
                        <option>Kansas City Chiefs</option>
                        <option>Oakland Raiders</option>
                        <option>San Diego Chargers</option>
                     </optgroup>
                  </select>
               </div>
            </div>
            <div class="form-group">
               <label class="col-sm-2 control-label">Chosen Multiple</label>
               <div class="col-sm-10">
                  <select chosen="" multiple="multiple" ng-model="team2" class="chosen-select form-control">
                     <option value="">
                        <option>Dallas Cowboys</option>
                        <option>New York Giants</option>
                        <option>Philadelphia Eagles</option>
                        <option>Washington Redskins</option>
                        <option>Chicago Bears</option>
                        <option>Detroit Lions</option>
                        <option>Green Bay Packers</option>
                        <option>Minnesota Vikings</option>
                        <option>Atlanta Falcons</option>
                        <option>Carolina Panthers</option>
                        <option>New Orleans Saints</option>
                        <option>Tampa Bay Buccaneers</option>
                        <option>Arizona Cardinals</option>
                        <option>St. Louis Rams</option>
                        <option>San Francisco 49ers</option>
                        <option>Seattle Seahawks</option>
                        <option>Buffalo Bills</option>
                        <option>Miami Dolphins</option>
                        <option>New England Patriots</option>
                        <option>New York Jets</option>
                        <option>Baltimore Ravens</option>
                        <option>Cincinnati Bengals</option>
                        <option>Cleveland Browns</option>
                        <option>Pittsburgh Steelers</option>
                        <option>Houston Texans</option>
                        <option>Indianapolis Colts</option>
                        <option>Jacksonville Jaguars</option>
                        <option>Tennessee Titans</option>
                        <option>Denver Broncos</option>
                        <option>Kansas City Chiefs</option>
                        <option>Oakland Raiders</option>
                        <option>San Diego Chargers</option>
                     </option>
                  </select>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Masked input</label>
               <div class="col-sm-10">
                  <div class="row">
                     <div class="col-sm-6">
                        <input type="text" masked="" data-inputmask="'mask': '999-99-999-9999-9'" placeholder="ISBN" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '999-99-999-9999-9"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" masked="" data-inputmask="'mask': '99/99/9999'" placeholder="Date" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '99/99/9999"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" masked="" data-inputmask="'mask': '(999) 999-9999'" placeholder="Phone number" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '(999) 999-9999"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" masked="" data-inputmask="'mask': 'aaaa-9999-aa99-9999'" placeholder="Custom Key" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': 'aaaa-9999-aa99-9999"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" masked="" data-inputmask="'mask': '$ 999.999.999,99'" placeholder="Currency Dolar" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '$ 999.999.999,99"'</span>
                     </div>
                     <div class="col-sm-6">
                        <input type="text" masked="" data-inputmask="'mask': '€ 999.999.999,99'" placeholder="Currency Euro" class="form-control" />
                        <span class="help-block">data-inputmask="'mask': '€ 999.999.999,99"'</span>
                     </div>
                  </div>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Tags input
                  <div class="text-sm text-muted">Type and press Enter</div>
               </label>
               <div class="col-sm-10">
                  <input type="text" tagsinput="tagsinput" ng-value="cities.join(',')" ng-model="cities" class="form-control" />
                  <span class="help-block">Values:
                     <code>{{cities}}</code>
                  </span>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">File input</label>
               <div class="col-sm-10">
                  <input filestyle="" type="file" data-classbutton="btn btn-default" data-classinput="form-control inline" class="form-control" />
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">Angular Simple wysiwyg</label>
               <div class="col-sm-10">
                  <script type="text/ng-template" id="ng-wig/views/ng-wig.html">
                     <div class="ng-wig"><div class="btn-group btn-group-sm wd-wide"><button type="button" title="Header" ng-click="execCommand('formatblock', '&lt;h1&gt;')" class="btn btn-sm btn-default"><em class="fa fa-header"></em></button><button type="button" title="Paragraph" ng-click="execCommand('formatblock', '&lt;p&gt;')" class="btn btn-sm btn-default"><em class="fa fa-paragraph"></em></button><button type="button" title="Unordered List" ng-click="execCommand('insertunorderedlist')" class="btn btn-sm btn-default"><em class="fa fa-list-ul"></em></button><button type="button" title="Ordered List" ng-click="execCommand('insertorderedlist')" class="btn btn-sm btn-default"><em class="fa fa-list-ol"></em></button><button type="button" title="Bold" ng-click="execCommand('bold')" class="btn btn-sm btn-default"><em class="fa fa-bold"></em></button><button type="button" title="Italic" ng-click="execCommand('italic')" class="btn btn-sm btn-default"><em class="fa fa-italic"></em></button><button type="button" title="link" ng-click="execCommand('createlink')" class="btn btn-sm btn-default"><em class="fa fa-link"></em></button><button type="button" title="Edit Html" ng-class="{ 'nw-button--active': editMode }" ng-click="toggleEditMode()" class="pull-right btn btn-sm btn-default"><em class="fa fa-pencil"></em></button></div><div class="nw-editor"><textarea ng-show="editMode" ng-model="content" class="nw-editor__src"> </textarea><iframe scrolling="{{ autoexpand ? 'no' : 'yes' }}" frameBorder="0" ng-hide="editMode" ng-model="content" ng-wig-editable="" class="nw-editor__res"></iframe></div></div>
                  </script>
                  <textarea ng-wig="wysiwygContent"></textarea>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <label class="col-sm-2 control-label">TextAngular Editor</label>
               <div class="col-sm-10">
                  <!-- Wysiswyg editor-->
                  <div text-angular="" ng-model="htmlContent" name="wysiswyg-editor" class="btn-group-small"></div>
               </div>
            </div>
         </fieldset>
         <fieldset>
            <div class="form-group">
               <div class="col-sm-4 col-sm-offset-2">
                  <button type="submit" class="btn btn-default">Cancel</button>
                  <button type="submit" class="btn btn-primary">Save changes</button>
               </div>
            </div>
         </fieldset>
      </form>
   </div>
</div>
<!-- END panel-->